<template>
  <div class="login" @keyup.enter="login('loginForm')">
    <div class="wrap">
      <div class="logo">
        <img src="@/assets/images/logo.png"/>
      </div>
      <div class="form">
        <Form ref="loginForm" :model="loginForm" :rules="formRule">
          <FormItem prop="userAccount">
            <Input prefix="ios-contact" type="text" v-model="loginForm.userAccount" placeholder="用户名" />
          </FormItem>
          <FormItem prop="userPwd">
            <Input prefix="ios-lock-outline" type="password" v-model="loginForm.userPwd" placeholder="密码" />
          </FormItem>
        </Form>
      </div>
      <div class="login-but">
        <Button class="but" ghost @click="login('loginForm')">
          登录
        </Button>
      </div>
    </div>
  </div>
</template>

<script>
import Api from '@/api'

const loginApi = Api.Login

export default {
  name: 'login',
  data() {
    return {
      loginForm: {
        userAccount: '',
        userPwd: '',
      },
      formRule: {
        userAccount: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        userPwd: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            type: 'string', min: 3, max: 20, message: '请输入3-20位字母数字', trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    login(name) {
      this.$refs[name].validate(async (valid) => {
        if (valid) {
          const params = {
            userPwd: this.loginForm.userPwd,
            userAccount: this.loginForm.userAccount,
          }
          const { responseCode, data } = await this.$request(loginApi.login, params)
          if (responseCode === '1') {
            this.$Message.success('登陆成功！')
            this.$router.push({ path: './channelProvider' })
            sessionStorage.setItem('token', data.token)
          } else {
            this.$Message.error('登录失败！')
          }
        }
      })
    },
  }
}
</script>
<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url('../../assets/images/bg.jpg') no-repeat;
  // background-size: 100% 100%;
  display: flex;
  align-items: center;

  .wrap {
    height: 350px;
    width: 350px;
    border-radius: 5px;
    box-shadow: 0px 2px 12px 5px rgba(255, 255, 255, 0.6);
    margin-left: 200px;
  }

  .logo {
    padding: 10px 20px;
  }

  .login-but, .form {
    margin: 20px;

    .but {
      width: 100%;
    }

    .ivu-form-item {
      margin-bottom: 30px;
    }
  }
}
</style>
